<template>
  <div>
    <div class="activity" ref="activity">
      <div class="wrapper">
        <div class="newest-activity-list" v-for="(item,index) in activityList" :key="index" @click="ToActivityDetails(item.id)">
        <div class="newest-activity-left"><img :src="item.img_url" mode="widthFix"></div>
        <div class="newest-activity-right">
          <div class="newest-activity-name">{{item.name}}</div>
          <div class="newest-activity-start">开始时间&nbsp;{{item.start_time}}</div>
          <div class="newest-activity-start">结束时间&nbsp;{{item.end_time}}</div>
          <div class="newest-activity-num">
            <!-- <div class="newest-activity-num-left">浏览量:{{item.browse_num}}</div> -->
            <div class="newest-activity-num-right">已报名人数:{{item.join_num}}</div>
          </div>
        </div>
      </div>
      </div>
  </div>
  </div>
</template>

<script>
import BScroll from 'better-scroll';
import {Toast} from 'vant';
  export default {
    data(){
      return {
        rightScroll:'',
        activityList:[],
        limit: 6, //活动条数
        page: 1, //页码
      }
    },
    mounted(){
      this.reqActivityList();
      this.initScroll()
    },
    watch: {
      activityList(){
        this.rightScroll.refresh()
      }
    },
    components:{
      // activityList
    },
    methods:{
      // 获取活动列表
      async reqActivityList(){
        Toast.loading({   mask: false,   message: '加载中...' });
        let params = {
          limit:this.limit,
          page:this.page,
        };
        let res = await this.$api.getActivityList(params);
        
        if(res.level == "success"){
          let arr = res.activities;
          // arr.forEach(item => {
          //   item.start_time = item.start_time.split(' ')[0];
          // });
          this.activityList =[...this.activityList,...arr];
          Toast.clear()
        }
      },
      // //跳转到活动详情
      ToActivityDetails(activity){
        this.$router.push({
          name:'ActivityDetail',
          query:{
            id: activity
          }
        })
      },
      initScroll(){
        this.$nextTick(() => {
          this.rightScroll = new BScroll(this.$refs.activity, {
            scrollY: true,
            scrollX: false,
            mouseWheel: true,
            click: true,
            taps: true,
            pullUpLoad: {
              threshold: -30 // 当上拉距离超过30px时触发 pullingUp 事件
            }
          });

          this.rightScroll.on('pullingUp', () => {
                  this.page++;
                  this.reqActivityList()
                  this.rightScroll.finishPullUp(); // 事情做完，需要调用此方法告诉 better-scroll 数据已加载，否则上拉事件只会执行一次
              })
        });
      }
    }
  }
</script>

<style lang="scss" scoped>
// .wrapper{
//   height: 100vh
// }
  .activity{
    width: 100%;
    max-height: 100vh;
    background-color: #f1f1f1;
    padding-bottom: 20px;
    .newest-activity-list{
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 2px;
      padding: 20px 0;
      background-color: #fff;
      .newest-activity-left{
        width: 300px;
        height: 180px;
        overflow: hidden;
        border-radius: 12px;
        img{
          width: 100%;
          border-radius: 12px;
        }
      }
      .newest-activity-right{
        font-size: 30px;
        color: #333;
        margin-left: 22px;
        .newest-activity-name{
          width: 320px;
          line-height: 44px;
          display: -webkit-box;
      /*! autoprefixer: off */
          -webkit-box-orient: vertical
          /* autoprefixer: on */;
          -webkit-line-clamp: 2;
          overflow: hidden;
          color: #666;
          text-align: left;
        }
        .newest-activity-start{
          margin-top:10px;
          font-size: 24px;
          color: #979696;
          height: 44px;
          text-align: left;
          line-height: 44px;
        }
        .newest-activity-num{
          font-size: 24px;
          color: #979696;
          height: 44px;
          line-height: 44px;
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
      }
    }
  }
</style>

